<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>展会客户</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/dist/img/icon.png" type="image/x-icon">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/dist/plugins/bootstrap/css/bootstrap.min.css">
    <!--字体-->
    <link rel="stylesheet" href="/dist/css/font-awesome.min.css">
    <!--图标-->
    <link rel="stylesheet" href="/dist/css/ionicons.min.css">
    <!--OA主样式-->
    <link rel="stylesheet" href="/dist/css/OA.min.css?t=86e2297f">
    <link rel="stylesheet" href="/dist/css/skins/OA-skins.min.css?t=222aea35">
    <style>
        .table th {
            padding: 5px 0 !important;
        }

        .row-height {
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            word-break: break-all;
            word-wrap: break-word;
            text-align: left;
        }

        .clickable {
            color: #95C0F4;
            cursor: pointer;
        }

        .track-box {
            position: absolute;
            top: 200px;
            left: 260px;
            display: none;
        }

        .track-box .arrow-out {
            width: 10px;
            margin-left: 60px;
            border-width: 10px;
            border-color: #F1F1F1;
            border-top-width: 0;
            border-style: dashed;
            border-bottom-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
            top: 0;
            position: absolute
        }

        .track-box .arrow-in {
            width: 10px;
            margin-left: 60px;
            border-width: 10px;
            border-color: #FCFCFC;
            border-top-width: 0;
            border-style: dashed;
            border-bottom-style: solid;
            border-left-color: transparent;
            border-right-color: transparent;
            top: 2px;
            position: absolute
        }

        .track-box .list {
            border: 1px solid #F1F1F1;
            background-color: #FCFCFC;
            padding: 3px;
        }

        .track-box .list table {
            max-width: 600px;
            width: 300px;
        }

        .track-box .list td {
            padding: 5px;
        }

        .track-box .list td.create-time {
            width: 80px;
        }

        .btn-search {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<section class="content" id="app">
    <input type="text" placeholder="客户电话或姓名" style="width: 150px;height: 24px;margin-right: 10px"
           class="form-control pull-left"/>
    <input type="button" class="btn oaBtn btn-sm btn-search" value="查询"/>

    <a v-if="'销售管理经理,大区经理,区域支持'.indexOf(rn) > -1 || companyId=='201712161613432EAF27DBCCB7D0E6CA' || purview.returnBack"
       class="btn oaBtn btn-sm pull-right" style="width: 80px;margin:0 0 10px 10px" href="javascript:history.go(-1)">返回</a>
    <input type="button" value="展会报表" v-if="'区域支持'.indexOf(rn) > -1 || purview.report" id="exhibitioneReport"
           class="btn oaBtn btn-sm pull-right" style="width: 100px;margin:0 0 10px 10px" @click="report()">
    <input v-if="'区域经理,区域支持'.indexOf(rn) > -1 || purview.addCus" type="button" value="新增展会客户" id="editExhibitionCustomer"
           class="btn oaBtn btn-sm pull-right" style="width: 100px;margin-bottom: 10px" @click="addCustomer('0','add')">

    <div class="box-body no-padding iframeH3" style="overflow: auto;background: #fff;border-top: 1px solid #cbcbcd;
    border-bottom: 1px solid #cbcbcd">
        <table class="table table-hover table-bordered text-center" style="margin: -1px 0">
            <thead>
            <tr>
                <th style="width: 3%" v-if="'区域经理,大客户经理'.indexOf(rn) > -1">序号</th>
                <th style="width: 5%" v-if="'销售管理经理,总裁,后台管理,区域支持'.indexOf(rn) > -1">大区</th>
                <th style="width: 4%" v-if="'销售管理经理,总裁,后台管理,区域支持'.indexOf(rn) > -1">大区<br>经理</th>
                <th style="width: 8%" v-if="'区域经理,大客户经理'.indexOf(rn) == -1">区域</th>
                <th style="width: 4%" v-if="'区域经理,大客户经理'.indexOf(rn) == -1">区域<br>经理</th>
                <th style="width: 3%" v-if="'区域经理,大客户经理'.indexOf(rn) == -1">客户<br>数量</th>
                <th style="width: 3%" v-if="'区域经理,大客户经理'.indexOf(rn) == -1">定金<br>目标</th>
                <th style="width: 5%">客户<br>姓名</th>
                <th style="width: 10%">意向<br>机型</th>
                <th style="width: 5%">最新<br>跟踪日期</th>
                <th style="width: 20%">跟踪情况</th>
                <th style="width: 4%">定金<br>状态</th>
                <th style="width: 4%">状态</th>
                <th style="width: 3%" v-if="rn =='区域经理' || rn =='区域支持' || purview.updateCus">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,i) in list">
                <td v-if="'区域经理,大客户经理'.indexOf(rn) > -1">{{i+1}}</td>
                <td v-if="'销售管理经理,总裁,后台管理,区域支持'.indexOf(rn) > -1">{{item.bigRegionName}}</td>
                <td v-if="'销售管理经理,总裁,后台管理,区域支持'.indexOf(rn) > -1">{{item.bigUserName}}</td>
                <td v-if="'区域经理,大客户经理'.indexOf(rn) == -1">
                    <div class='row-height' :title='item.regionName'>{{item.regionName}}</div>
                </td>
                <td v-if="'区域经理,大客户经理'.indexOf(rn) == -1">{{item.userName}}</td>
                <td v-if="'区域经理,大客户经理'.indexOf(rn) == -1">{{item.CUSTOM_NUM}}</td>
                <td v-if="'区域经理,大客户经理'.indexOf(rn) == -1">{{item.DEPOSIT_NUM}}</td>
                <td class='clickable seller' :data-id='item.CUSTOMER_ID'>
                    {{item.NAME}}
                </td>
                <td>
                    <div class='row-height' :title='item.modelName'>{{item.modelName}}</div>
                </td>
                <td>{{item.TRACK_TIME}}</td>
                <td>
                    <div class='row-height' :title='item.VISIT_CONTENT'>{{item.VISIT_CONTENT}}</div>
                </td>
                <td>{{item.depositStatusName}}</td>
                <td>{{item.trackStatusName}}</td>
                <td v-if="'区域经理,区域支持'.indexOf(rn) > -1 || purview.updateCus">
                    <span class='clickable' @click="editCustomer(item.ID,'edit')">修改</span><br>
                    <span class='clickable' @click="addCustomerVisit(item.ID,item.CUSTOMER_ID,'edit')">跟踪</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="oa-pager text-center">
        共<span id="allCount">{{recordCount}}</span>条记录&nbsp;&nbsp;&nbsp;
        <span id="nowPage">{{pageIndex}}</span>/<span id="allPage">{{pageCount}}</span>&nbsp;&nbsp;&nbsp;
        <span id="first" class="oa-pager-button" @click="pagination('first')">首页</span>
        <span id="prev" class="oa-pager-button" @click="pagination('pre')">上一页</span>
        <span id="next" class="oa-pager-button" @click="pagination('next')">下一页</span>
        <span id="last" class="oa-pager-button" @click="pagination('last')">尾页</span>
    </div>
</section>
<div class="track-box">
    <div style="position: relative;height: 10px">
        <div class="arrow-out"></div>
        <div class="arrow-in"></div>
    </div>
    <div class="list">
        <table>
        </table>
    </div>
</div>
</body>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--插件JS-->
<script src="https://file.ggxqce.com/web/bootstrap.min.js"></script>
<!--框架已定义 JS-->
<script src="/dist/js/app_iframe.js?t=8e743a31"></script>
<!--oa自定义  JS-->
<script src="/dist/js/oa.js?t=54c6b89c"></script>
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script type="text/javascript" src="/dist/plugins/lhgdialog/lhgdialog.min.js?self=true"></script>
<script type="application/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            purview: {addCus: false, returnBack: false, report: false, updateCus: false, trackCus: false},
            purviewList: [],
            currentUser: getCurrentUser(),
            rn: getCurrentUser().roleName,
            companyId: getCurrentUser().companyId,
            list: [],
            pageIndex: 1,
            pageCount: 1,
            recordCount: 1,
            trackList: [],
            exId: "",
            key: "",
            userId: "",
            exhibitionId: ""
        },
        methods: {
            getPurview: function () {//权限
                var that = this;
                $.wyui.postMethod(urlConfig.system.rightOp.getRightOpByUserId, {userId: currentUser.id}, function (data) {
                    $(data).each(function (i, item) {
                        that.purviewList.push(item.eName);
                    });
                    that.purview.addCus = $.inArray('addCus', that.purviewList) > -1 ? true : false;
                    that.purview.returnBack = $.inArray('returnBack', that.purviewList) > -1 ? true : false;
                    that.purview.report = $.inArray('report', that.purviewList) > -1 ? true : false;
                    that.purview.updateCus = $.inArray('updateCus', that.purviewList) > -1 ? true : false;
                    that.purview.trackCus = $.inArray('trackCus', that.purviewList) > -1 ? true : false;
                });
            },
            refresh: function () {
                var that = this;
                $.wyui.postMethod(
                    urlConfig.crm.exhibition.getExhibitionCustomerInfo,
                    {pageIndex: that.pageIndex, userId: that.userId, exhibitionId: that.exhibitionId, key: that.key},
                    function (data) {
                        app.list = data.records;
                        app.pageIndex = data.pageIndex;
                        app.pageCount = data.pageCount;
                        app.recordCount = data.recordCount;

                        $(".iframeH3").scrollTop(0);
                    }
                );
            },
            pagination: function (auction) {
                if (auction == "first")
                    this.pageIndex = 1;
                else if (auction == "next" && this.pageIndex < this.pageCount)
                    this.pageIndex += 1;
                else if (auction == "pre" && this.pageIndex > 1)
                    this.pageIndex -= 1;
                else if (auction == "last")
                    this.pageIndex = this.pageCount;
                this.refresh();
            },
            initReprot: function () {
                var that = this;
                this.userId = this.getUrlParam("userId");
                this.exhibitionId = this.getUrlParam("exhibitionId");

                if (this.userId == null || this.userId == "")
                    this.userId = this.currentUser.id;
                if (this.exhibitionId == null || this.exhibitionId == "") {
                    $.wyui.postMethod(
                        urlConfig.crm.exhibition.getExhibitionIdByUserId,
                        {userId: that.userId},
                        function (data) {
                            that.exhibitionId = data[0].exhibitionId;
                        }, true);
                }
                this.exId = that.exhibitionId;
                this.refresh();
            }, report: function () {
                top.addTabs({id: "exhibitionReport", title: '展会报表', close: true, url: 'crm/exhibition/report.html'});
            },
            addCustomer: function (id, pageType) {
                $.dialog({
                    content: 'url:customerDetail.html?id=' + id + '&exhibitionId=' + this.exId + '&pageType=' + pageType + "&t=" + new Date(),
                    title: '新增展会客户',
                    width: 558,
                    height: 340,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            editCustomer: function (id, pageType) {
                $.dialog({
                    content: 'url:customerDetail.html?id=' + id + '&pageType=' + pageType + "&t=" + new Date(),
                    title: '修改展会客户',
                    width: 558,
                    height: 340,
                    max: false,
                    min: false,
                    lock: true
                });
            },
            addCustomerVisit: function (id, customerId) {
                console.log(id);
                console.log(customerId)
                $.dialog({
                    content: 'url:customerVisit.html?id=' + id + '&customerId=' + customerId + "&t=" + new Date(),
                    title: '跟踪状态',
                    width: 680,
                    height: 320,
                    max: false,
                    min: false,
                    lock: true
                });
            }, getUrlParam: function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]);
                return null; //返回参数值
            }
        },
        mounted: function () {
            var that = this;
            that.initReprot();
            that.getPurview();

            $(".table").on("click", ".seller", function (e) {
                $(document).bind('click', function () {
                    $(".track-box").hide();
                });

                if (!$(".track-box").is(":hidden")) {
                    $(".track-box").hide();
                    return false;
                }
                $(".track-box").css("top", $(this).offset().top + $(this).width() / 3);
                $(".track-box").css("left", $(this).offset().left - $(this).width() / 5);
                var cusId = $(this).attr("data-id");
                $.wyui.postMethod(
                    urlConfig.crm.exhibition.getTrackRecordList,
                    {cusId: cusId},
                    function (data) {
                        var arr = new Array();
                        for (var i = 0; i < data.length; i++) {
                            arr.push("<tr>");
                            arr.push("<td class='create-time'>" + data[i].CREATE_TIME + "</td>");
                            arr.push("<td>" + data[i].VISIT_CONTENT + "</td>");
                            arr.push("</tr>");
                        }
                        $(".track-box .list").html(arr.join(""));
                        if (data.length == 0) {
                            $(".track-box .list").html("<h6 style='width: 130px;text-align: center'>暂无跟踪记录</h6>");
                        }
                        $(".track-box").show();
                    });
            });

            $(".btn-search").on("click", function () {
                var searchVal = $(this).prev().val();
                that.key = searchVal;
                that.refresh();
            });

            repaintFreeze = function () {
                var freezeElement = $(".table");
                $(".freezeHead").remove();
                var tableCalss = freezeElement.attr("class");
                var tableStyle = freezeElement.attr("style");
                var tableHead = freezeElement.find("thead").prop("outerHTML");
                var arr = new Array();
                arr.push("<div class='freezeHead' style='position: absolute;'>");
                arr.push("<table class='" + tableCalss + "' style='" + tableStyle + "'>");
                arr.push(tableHead);
                arr.push("</table>");
                arr.push("</div>");
                $(".table").before(arr.join(" "));
                $(".freezeHead table").eq(0).width(freezeElement.eq(1).width());
                $(".table").eq(1).find("th").each(function (i, item) {
                    $(".freezeHead table th").eq(i).width(freezeElement.eq(1).find("th").eq(i).width());
                });
            }
            repaintFreeze();
            setInterval(function () {
                repaintFreeze();
            }, 300);
        }
    });
</script>
</html>